{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %}
{% block content %}
<div>
    <p class="text-right"><button id= "add_column" onclick="add_column()" class="btn btn-primary">add column</button></p>
    <table class="table table-hover">
    	<tr>
    		<td>序号</td>
    		<td>栏目名称</td>
    		<td>操作</td>
    	</tr>
    	{% for column in columns %}
    	<tr>
    	    <td>{{ forloop.counter }}</td>
    	    <td>{{ column.column }}</td>
    	    <td>
                <a name="edit" href="javascript:" onclick="edit_column(this, {{ column.id }})"><span class="glyphicon glyphicon-pencil"></span></a>
                <a name="delete" href="javascript:" onclick="del_column(this, {{ column.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
            </td>
    	</tr>
    	{% empty %}
    	<p>还没有设置栏目，太懒了。</p>
    	{% endfor %}
    </table>
</div>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src='{% static "js/layer.js"%}'></script>
<script type="text/javascript">
function add_column(){
    var index = layer.open({
	type:1,
	skin:"layui-layer-rim",
	area: ["400px", "200px"],
	title: "新增栏目",
	content: '<div class="text-center" style="margin-top:20px"><p>请输入新的栏目名称</p><p>{{column_form.column}}</p></div>',
	btn:['确定', '取消'],
	yes: function(index, layero){
	    column_name = $('#id_column').val();
	    $.ajax({
		url:'{% url "article:article_column" %}',
		type:'POST',
		data:{"column":column_name},
		success:function(e){
		    if(e=="1"){
		    parent.location.reload();
		    layer.msg("good");
		    }else{
		        layer.msg("此栏目已有，请更换名称")
		    }
		},
	    });
	},
	btn2: function(index, layero){
	layer.close(index);
	}
    });
}

function edit_column(the, column_id){
    var name = $(the).parents("tr").children("td").eq(1).text();
    var index = layer.open({
	type: 1,
	skin: "layui-layer-rim",
        area: ["400px", "200px"],
        title: "编辑栏目",
        content: '<div class="text-center" style="margin-top:20px"><p>请编辑的栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p></div>',
        btn:['确定', '取消'],
        yes: function(index, layero){
       	    new_name = $("#new_name").val();
           	$.ajax({
            	url: "{% url 'article:rename_article_column' %}",
            	type: "POST",
            	data: {"column_id": column_id, "column_name": new_name},
            	success: function(e){
       		    if(e=="1"){
            		parent.location.reload();
            	        layer.msg("good");
            	    }else{
            		layer.msg("新的名称没有保存,修改失败。")
            	    }
            	},
            });
        },
    });
}

function del_column(the, column_id){
    var name = $(the).parents("tr").children("td").eq(1).text();
    layer.open({
	type: 1,
	skin: "layui-layer-rim",
	area: ["400px", "200px"],
	title: "删除栏目",
	content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除{'+name+'}栏目</p></div>',
	btn:['确定', '取消'],
	yes: function(){
	    $.ajax({
	    url: '{% url "article:del_article_column" %}',
	    type:"POST",
	    data: {"column_id":column_id},
	    success: function(e){
	        if(e=="1"){
		    parent.location.reload();
		    layer.msg("has been deleted.");
		}else{
		    layer.msg("删除失败");
		}
	    },
	    })	
	},
    });
}


</script>

{% endblock %}

